

{% extends "base.html" %}
{% block title %}Instancias geolocalizadas{% endblock %}
{% block mainframe %}

	{% if form %}
		<h1>Formulario: {{ form.name }}</h1>
	{% else %}
		<h1>Formulario: {{ instances.0.0.form.name }}</h1>
		<h2>Instancia: {{ instances.0.0.id }}</h2>
	{% endif %}
	<h3>Geolocalizaci&oacute;n</h3>
	{% if instances %}
	    <div id="map"></div>
	{% else %}
		<br />
		<h3>No se ha encontrado ninguna instancia geolocalizable.</h3>
	{% endif %}

{% endblock %}

{% block sidebar %}
		    <ul>
				<li><a class="item" href="/beekeeper/show_form_list/" id="campo0">
					<img src="/beekeeper/images/tw_back.png" />
					<div class="label">
						<p><strong>Volver atr&aacute;s</strong></p>
					</div>
				</a></li>
			</ul>
{% endblock %}


{% block extrajs %}
    {% comment %}
        Aquí se generaría el array Markers a partir de la geolocalización de las instancias
    {% endcomment %}
    <script language="JavaScript">
	    {% if instances %}
	        var markers = [
	        {% for instance, image in instances %}
                {% if instance.latitude %}
		           {
	                  'name': '{{ instance.id }}',
	                  'location': [{{ instance.latitude }}, {{ instance.longitude }}],
	                  {% if image.value %}
	                       'message': '<p class="message" align="center"><a href="/beekeeper/show_instance/{{ instance.id }}">Ver intancia nº {{ instance.id }} completa</a> <br/> <br/> <img src="/beekeeper/media/{{ image.get_text }}"/></p>'
	                  {% else %}
	                       'message': '<p class="message" align="center"><a href="/beekeeper/show_instance/{{ instance.id }}">Ver intancia nº {{ instance.id }} completa</a></p>'
	                  {% endif %}
	               },
	            {% endif %}
	        {% endfor %}
	        ];
	    {% else %}
	    
		    // Instancias geolocalizadas
			var markers = [
			    {
			      'name': 'España',
			      'location': [40.463667, -3.74922],
			      'message': 'TEXTO2' 
			   },
			    {
			      'name': 'La Svizra',
			      'location': [46.818188, 8.227512],
			      'message': 'TEXTO3' 
			   },
			    {
			      'name': 'France',
			      'location': [46.227638, 2.213749],
			      'message': 'TEXTO4' 
			   },
			    {
			      'name': 'Ireland',
			      'location': [53.41291, -8.24389],
			      'message': 'TEXTO5' 
			   },
			    {
			      'name': 'Italia',
			      'location': [41.87194, 12.56738],
			      'message': 'TEXTO6' 
			   },
			    {
			      'name': 'United Kingdom',
			      'location': [55.378051, -3.435973],
			      'message': 'TEXTO7' 
			   },
			];
	    {% endif %}
    </script>
    <script src="/beekeeper/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="/beekeeper/js/gmaps_functions.js"></script>
{% endblock %}
